import React, { useEffect, useState } from 'react'

/* 
  如果state的值是一个引用类型值,我们仍然不能直接修改这个值,而是通过set
  xxx的方式覆盖原有的值

*/

export default function App() {
  let [person,setPerson]=useState([{
    id:'001',
    name:'张三'
  },{
    id:'002',
    name:'李四'
  },{
    id:'003',
    name:'王五'
  }
])

useEffect(()=>{
  console.log('preson改变了');
},[person])

const addPreson=()=>{
  setPerson([...person,{id:Date.now(),name:'小钟'}])
}
  return (
    <div>
      <button onClick={addPreson}>添加数据</button>
      <ul>
        {
          person.map(item=>{
            return <li key={item.id}>{item.name}</li>
          })
        }
      </ul>
    </div>
  )
}
